<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
</head>

<body class="pear-container">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <form class="layui-form edit-form" method="post" action="">
                    <div class="layui-tab layui-tab-brief" lay-filter="TabBrief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">基础配置</li>
                            <li>奖励配置</li>
                            <li>日榜单奖励配置</li>
                            <li>总榜单奖励配置</li>
                            <li>超级金币发送配置</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        活动开启
                                    </label>
                                    <div class="layui-input-block">
                                        {if $data['activiteisopen'] == 1}
                                        <input type="radio" name="activiteisopen" value="1" title="开启" checked>
                                        <input type="radio" name="activiteisopen" value="0" title="关闭">
                                        {else}
                                        <input type="radio" name="activiteisopen" value="1" title="开启">
                                        <input type="radio" name="activiteisopen" value="0" title="关闭" checked>
                                        {/if}
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        玩法介绍
                                    </label>
                                    <div class="layui-input-block">
                                        <textarea name="desc" class="layui-textarea">{$data['desc']??''}</textarea>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        开启类型
                                    </label>
                                    <div class="layui-input-inline">
                                        <input autocomplete="off" class="layui-input" name="typels"
                                            value="{$data['typels']??''}" type="text" />
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">连抽的抽奖类型，例如1连抽，10连抽，100连抽，这里只需要填写数字即可。
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        兑换比例
                                    </label>
                                    <div class="layui-input-inline">
                                        <input autocomplete="off" class="layui-input" name="dhbl"
                                            value="{$data['dhbl']??''}" type="text" />
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">例如 1:1000 前面是超级金币，后面是平台币</div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        开启金币
                                    </label>
                                    <div class="layui-input-inline">
                                        <input autocomplete="off" class="layui-input" name="onenumcoin"
                                            value="{$data['onenumcoin']??''}" type="text" />
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">多少金币开启一次，这里了计算的是一次的金币</div>
                                </div>

                            </div>
                            <div class="layui-tab-item">
                                <h3>请前往菜单：盲盒活动->盲盒奖励配置修改</h3>
                            </div>
                            <div class="layui-tab-item">

                                <div class="main-container">
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <h3 style="color: red;">日榜单奖励发送时间请前往宝塔进行配置：宝塔面板->计划任务->盲盒日榜单奖励发放</h3>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block" id='dayranklistbox'
                                            style="border: 1px dashed red;">

                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                            排名列表
                                        </label>
                                        <div class="layui-input-block">
                                            <textarea name="daysendgoodsls" id="daysendgoodsls"
                                                lay-verify="daysendgoodsls" placeholder="不需要填写！！！点击按钮进行添加！"
                                                class="layui-textarea" readonly>
                                                {$data['daysendgoodsls']}
                                            </textarea>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-normal layui-btn-fluid"
                                                id="sendBroadday">测试发送(将直接发送一次)</button>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                            排名
                                        </label>
                                        <div class="layui-input-inline">
                                            <input autocomplete="off" class="layui-input" name="rankdaynum"
                                                id="rankdaynum" type="text" />
                                        </div>
                                        <div class="layui-form-mid layui-word-aux">
                                            排名多少可以发送，例如填写1,则发送第一名奖励；如填写1-5，则包含1和5的前五名奖励</div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block" id='listbox' style="border: 1px dashed #fffb00;">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                        </label>
                                        <div class="layui-input-inline">
                                            <select name="goodsls" id="goodsls" lay-search>
                                                <option value="">物品列表(可输入后选择)</option>
                                                {volist name="ItemLs" id="ItemLs"}
                                                <option value="{$ItemLs.itemid}">{$ItemLs.itemname}</option>
                                                {/volist}
                                            </select>
                                        </div>
                                        <div class="layui-input-inline">
                                            <input type="text" class="layui-input layui-form-danger" name="goodsnum"
                                                id="goodsnum" type="text" />
                                        </div>
                                        <div class="layui-input-inline">
                                            <button type="button" class="layui-btn layui-btn-normal"
                                                id="btnAddgoods">添加</button>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-warm layui-btn-fluid"
                                                id="btnAddRank_dayrank">添加一个排名奖励</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="layui-tab-item">

                                <div class="main-container">
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <h3 style="color: red;">总榜单奖励发送时间请前往宝塔进行配置：宝塔面板->计划任务->盲盒总榜单奖励发放</h3>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block" id='allranklistbox'
                                            style="border: 1px dashed red;">

                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                            排名列表
                                        </label>
                                        <div class="layui-input-block">
                                            <textarea name="allsendgoodsls" id="allsendgoodsls"
                                                lay-verify="allsendgoodsls" placeholder="不需要填写！！！点击按钮进行添加！"
                                                class="layui-textarea" readonly>
                                                {$data['allsendgoodsls']}
                                            </textarea>
                                        </div>
                                    </div>
<!--                               <div class="layui-form">-->
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">统计周期</label>
                                            <div class="layui-inline" id="ID-laydate-range">
                                                <div class="layui-input-inline">
                                                    <input type="text" autocomplete="off" id="ID-laydate-start-date" class="layui-input" placeholder="开始日期">
                                                </div>
                                                <div class="layui-form-mid">-</div>
                                                <div class="layui-input-inline">
                                                    <input type="text" autocomplete="off" id="ID-laydate-end-date" class="layui-input" placeholder="结束日期">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">跨服组列表</label>
                                        <div class="layui-input-inline">
                                            <select name="KFServerList" id="KFServerList">
                                                <option value="">请选择跨服</option>
                                                {volist name="KFServerList" id="KFServerItem"}
                                                    <option value="{$KFServerItem.id}" data-statrid="{$KFServerItem.statrid}" data-endid="{$KFServerItem.endid}">
                                                    组名：{$KFServerItem.kfgroupname}---起始ID:{$KFServerItem.statrid}---结束ID:{$KFServerItem.endid}</option>
                                                {/volist}
                                            </select>
                                            <p>要发送的跨服组，需要一个组一个组的发，会给组内满足排名的玩家发放奖励</p>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-normal layui-btn-fluid"
                                                id="sendBroadall">测试发送(将直接发送一次)</button>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                            排名
                                        </label>
                                        <div class="layui-input-inline">
                                            <input autocomplete="off" class="layui-input" name="rankallnum"
                                                id="rankallnum" type="text" />
                                        </div>
                                        <div class="layui-form-mid layui-word-aux">
                                            排名多少可以发送，例如填写1,则发送第一名奖励；如填写1-5，则包含1和5的前五名奖励</div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block" id='listbox1'
                                            style="border: 1px dashed #fffb00;">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                        </label>
                                        <div class="layui-input-inline">
                                            <select name="goodsls1" id="goodsls1" lay-search>
                                                <option value="">物品列表(可输入后选择)</option>
                                                {volist name="ItemLs1" id="ItemLs1"}
                                                <option value="{$ItemLs1.itemid}">{$ItemLs1.itemname}</option>
                                                {/volist}
                                            </select>
                                        </div>
                                        <div class="layui-input-inline">
                                            <input type="text" class="layui-input layui-form-danger" name="goodsnum1"
                                                id="goodsnum1" type="text" />
                                        </div>
                                        <div class="layui-input-inline">
                                            <button type="button" class="layui-btn layui-btn-normal"
                                                id="btnAddgoods1">添加</button>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-warm layui-btn-fluid"
                                                id="btnAddRank_allrank">添加一个排名奖励</button>
                                        </div>
                                    </div>
<!--                                </div>-->

                            </div>
                            <div class="layui-tab-item">

                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        限制数量
                                    </label>
                                    <div class="layui-input-inline">
                                        <input autocomplete="off" class="layui-input" name="sendcoinlimit"
                                            value="{$data['sendcoinlimit']??''}" type="text" />
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">主播在后台发送超级金币的数量(限制一次)</div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        区服
                                    </label>
                                    <div class="layui-input-block">
                                        <select name="serverid" lay-search>
                                            <option value="">服务器ID(可输入后选择)</option>
                                            {volist name="ServerLs" id="server"}
                                            <option value="{$server.sid}">{$server.name}</option>
                                            {/volist}
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        玩家账号
                                    </label>
                                    <div class="layui-input-block">
                                        <input type="text" class="layui-input layui-form-danger" name="actorname"
                                            id="actorname" type="text" />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        角色名称
                                    </label>
                                    <div class="layui-input-block">
                                        <select name="actoraccount" id="actoraccount" lay-search>
                                            <option value=""></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button type="button" class="layui-btn layui-btn-normal"
                                            id="onekeyCoinLimit">一键清空限制(选择区服则单区清理，不选择默认所有区服)</button>
                                    </div>
                                    <div class="layui-input-block" style="margin-top: 10px;">
                                        <button type="button" class="layui-btn layui-btn-normal"
                                            id="onePlayerCoinLimit">清理单个玩家限制(填写账号区服角色)</button>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
            </div>

            <div class="layui-input-block" style="min-height: 80px;">
                <button type="submit" class="pear-btn pear-btn-primary">保存</button>
                <button type="reset" class="pear-btn">重置</button>
            </div>
            </form>
        </div>
    </div>
    </div>

    <script>
        layui.use(['form', 'jquery', 'uploads'], function () {
            let form = layui.form;
            let $ = layui.jquery;

            var laydate = layui.laydate;
            // 日期范围 - 总榜单统计周期
            laydate.render({
                elem: '#ID-laydate-range',
                range: ['#ID-laydate-start-date', '#ID-laydate-end-date']
            });


            form.on('radio(type)', function (data) {
                if (data.value == 1) {
                    $("#oss").hide();
                    $("#qiniu").hide();
                }
                if (data.value == 2) {
                    $("#oss").show();
                    $("#qiniu").hide();
                }
                if (data.value == 3) {
                    $("#qiniu").show();
                    $("#oss").hide();
                }
            });


            //---------------------------------------------日榜单
            var itemList = {};
            var DayRanklistItems = {};

            var da = "{$data['daysendgoodsls']}";
            da = da.replace(/&quot;/g, '"'); // 替换所有的 &quot; 为 "

            var decodedData = JSON.parse(da.trim());

            for (var key in decodedData) {
                if (decodedData.hasOwnProperty(key)) {
                    var itemName1 = decodedData[key].name; // 不再需要JSON.parse
                    addAllRankItem(key, decodedData[key].items, "dayranklistbox");
                }
            }

            $('#btnAddgoods').click(function () {
                var itemid = $('#goodsls').val().trim();
                var itemnum = $('#goodsnum').val().trim();
                var itemName = $('#goodsls').find("option:selected").text().trim();

                itemName = itemName.replace(/['"]/g, '');

                if (itemid == '') {
                    layer.msg('请选择物品。。');
                    return false;
                }
                if (itemnum == '') {
                    layer.msg('请填入数量。');
                    return false;
                }

                appendChildtoHtml(itemid, itemnum, itemName, "listbox");
            });


            //---------------------------------------------总榜单
            var itemList1 = {};
            var AllRanklistItems = {};

            var da1 = "{$data['allsendgoodsls']}";
            da1 = da1.replace(/&quot;/g, '"'); // 替换所有的 &quot; 为 "

            var decodedData1 = JSON.parse(da1.trim());

            for (var key in decodedData1) {
                if (decodedData1.hasOwnProperty(key)) {
                    var itemName1 = decodedData1[key].name; // 不再需要JSON.parse
                    addAllRankItem(key, decodedData1[key].items, "allranklistbox");
                }
            }

            function addAllRankItem(onekey, items, listboxname) {

                // 创建一个新的div元素
                var newDiv = document.createElement('div');
                // 设置class属性
                newDiv.className = 'layui-input-block';
                // 设置style属性
                newDiv.style.border = '1px dashed blue';
                //添加到顶部的展示框中
                var listbox = document.getElementById(listboxname);
                listbox.appendChild(newDiv);

                //添加排名
                var newBtn = document.createElement('button');
                newBtn.setAttribute('type', 'button');
                newBtn.className = 'layui-btn layui-btn-primary layui-border-blue layui-btn-xs';
                newBtn.innerText = '排名：' + onekey;
                // 添加点击事件，用于删除按钮自身
                newBtn.addEventListener('click', function () {
                    if (listboxname == "allranklistbox") {
                        // 从AllRanklistItems中删除对应数据
                        delete AllRanklistItems[onekey];
                        // 移除相应的newDiv
                        listbox.removeChild(newDiv);
                        if (AllRanklistItems == {} || AllRanklistItems === undefined) {
                            $('#allsendgoodsls').val('')
                        } else {
                            $('#allsendgoodsls').val(JSON.stringify(AllRanklistItems))
                        }
                    } else if (listboxname == "dayranklistbox") {
                        // 从AllRanklistItems中删除对应数据
                        delete DayRanklistItems[onekey];
                        // 移除相应的newDiv
                        listbox.removeChild(newDiv);
                        if (DayRanklistItems == {} || DayRanklistItems === undefined) {
                            $('#daysendgoodsls').val('')
                        } else {
                            $('#daysendgoodsls').val(JSON.stringify(DayRanklistItems))
                        }
                    }

                });

                var itemLists = {}
                if (listboxname == "allranklistbox") {
                    newDiv.appendChild(newBtn);
                    AllRanklistItems[onekey] = { items: items };
                    itemLists = items
                } else if (listboxname == "dayranklistbox") {
                    newDiv.appendChild(newBtn);
                    DayRanklistItems[onekey] = { items: items };
                    itemLists = items
                }


                console.log("itemLists", itemLists)
                for (var key in itemLists) {
                    // 创建一个新按钮元素
                    var newButton = document.createElement('button');
                    newButton.setAttribute('type', 'button');
                    newButton.setAttribute('class', 'layui-btn layui-btn-primary layui-border-black');
                    newButton.innerText = itemLists[key].name + '=>' + itemLists[key].num;

                    // 添加点击事件，用于删除按钮自身
                    newButton.addEventListener('click', function () {
                        // 从itemList中删除对应数据
                        delete itemList1[key];
                        newDiv.removeChild(newButton);
                    });


                    newDiv.appendChild(newButton);
                }

            }

            $('#btnAddgoods1').click(function () {
                var itemid = $('#goodsls1').val().trim();
                var itemnum = $('#goodsnum1').val().trim();
                var itemName = $('#goodsls1').find("option:selected").text().trim();

                itemName = itemName.replace(/['"]/g, '');

                if (itemid == '') {
                    layer.msg('请选择物品。。');
                    return false;
                }
                if (itemnum == '') {
                    layer.msg('请填入数量。');
                    return false;
                }

                appendChildtoHtml(itemid, itemnum, itemName, "listbox1");
            });


            function clearnOther() {
                $('#rankallnum').val("")
                $('#listbox1').empty()
                $('#goodsnum1').val("")

                $('#rankdaynum').val("")
                $('#listbox').empty()
                $('#goodsnum').val("")


                itemList = {}
                itemList1 = {}
            }


            function appendChildtoHtml(itemid, itemnum, itemName, divName) {
                // 将新按钮添加到listbox中
                var myDiv = document.getElementById(divName);

                // 创建一个新按钮元素
                var newButton = document.createElement('button');
                newButton.setAttribute('type', 'button');
                newButton.setAttribute('class', 'layui-btn layui-btn-primary layui-border-black');
                newButton.innerText = itemName + '=>' + itemnum;
                // 向itemList对象插入数据
                itemList1[itemid] = { name: itemName, num: itemnum };

                // 添加点击事件，用于删除按钮自身
                newButton.addEventListener('click', function () {
                    // 从itemList中删除对应数据
                    delete itemList1[itemid];
                    myDiv.removeChild(newButton);
                });


                myDiv.appendChild(newButton);

            }

            $('#btnAddRank_allrank').click(function () {
                //添加排名
                var rankallnum = $("#rankallnum").val()
                if (rankallnum == "") {
                    layer.msg("排名不能为空，必填！");
                    return
                }
                addAllRankItem(rankallnum, itemList1, "allranklistbox");

                if (AllRanklistItems == {} || AllRanklistItems === undefined) {
                    $('#allsendgoodsls').val('')
                } else {
                    $('#allsendgoodsls').val(JSON.stringify(AllRanklistItems))
                }
                clearnOther()
            });

            $('#btnAddRank_dayrank').click(function () {
                //添加排名
                var rankdaynum = $("#rankdaynum").val()
                if (rankdaynum == "") {
                    layer.msg("排名不能为空，必填！");
                    return
                }
                addAllRankItem(rankdaynum, itemList1, "dayranklistbox");

                if (DayRanklistItems == {} || DayRanklistItems === undefined) {
                    $('#daysendgoodsls').val('')
                } else {
                    $('#daysendgoodsls').val(JSON.stringify(DayRanklistItems))
                }
                clearnOther()
            });



            $("#actorname").on("input", function (e) {
                //获取input输入的值
                var value = e.delegateTarget.value;
                if (value != null && value != '') {
                    getActors();
                }
            })


            function getActors() {
                var actorname = $('#actorname').val();
                var serverid = $("select[name='serverid']").val();
                if (serverid.trim() === "") {
                    layer.msg("请先填写区服名称！！！");
                    return
                }
                if (actorname.trim() === "") {
                    layer.msg("请先填写账号！！！");
                    return
                }
                actorname = actorname.trim();
                $.post('queryuname', { actorname: actorname, serverid: serverid }, function (res) {
                    console.log(res);
                    //判断有没有权限
                    if (res && res.code == 999) {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 2000,
                        })
                        return false;
                    } else if (res.code == 200) {
                        // 清空下拉框中的所有选项
                        $("#actoraccount").empty();
                        // 遍历data数组并添加选项
                        res.data.forEach(function (item) {
                            $("#actoraccount").append(
                                '<option value="' + item.actorid + '">' + item.actorname + '</option>'
                            );
                        });
                        // 使用layui的下拉框模块进行渲染
                        layui.form.render('select');
                        return false;
                    } else {
                        layer.msg(res.msg)
                    }
                })

            }

            $('#sendBroadday').click(function () {
                sendBroad("day");
            });

            $('#sendBroadall').click(function () {

                // 获取select元素
                var selectElement = document.getElementById('KFServerList');
                // 获取选中的选项
                var selectedOption = selectElement.options[selectElement.selectedIndex];
                // 获取自定义属性值
                var startServerId = selectedOption.getAttribute('data-statrid');
                var endServerId = selectedOption.getAttribute('data-endid');
                console.log(startServerId,endServerId);
                //获取时间
                var start_time = $('#ID-laydate-start-date').val();
                var end_time = $('#ID-laydate-end-date').val();

                console.log("start_time:"+start_time,"end_time:"+end_time,"startServerId:"+startServerId,"endServerId:"+endServerId);

                if (!start_time || !end_time) {
                    layer.msg("起始时间和结束时间不能为空");
                    return;
                }
                if (startServerId ==null && endServerId ==null) {
                    layer.msg("请选择一个跨服组");
                    return;
                }
                sendBroad("all", start_time, end_time, startServerId, endServerId);
            });

            function sendBroad(type, start_time, end_time, startServerId, endServerId) {
                $.post('sendBroad', { type: type, start_time: start_time, end_time: end_time, startServerId: startServerId, endServerId: endServerId }, function (res) {
                    console.log(res);
                    layer.msg(res.msg);
                });
            }


            //一键清理限制 金币发放限制
            $('#onekeyCoinLimit').click(function () {
                var actorname = $('#actorname').val();
                var serverid = $("select[name='serverid']").val();
                var actorid = $("select[name='actoraccount']").val();
                $.post('onekeyCoinLimit', { actorname: actorname, serverid: serverid, actorid: actorid }, function (res) {
                    layer.msg(res.msg)
                })
            });


            //清理单个玩家限制  金币发放限制
            $('#onePlayerCoinLimit').click(function () {
                var actorname = $('#actorname').val();
                var serverid = $("select[name='serverid']").val();
                var actorid = $("select[name='actoraccount']").val();
                if (actorname == "" || serverid == "" || actorid == "") {
                    layer.msg("请填写账号区服，选择角色！")
                    return
                }
                $.post('onePlayerCoinLimit', { actorname: actorname, serverid: serverid, actorid: actorid }, function (res) {
                    layer.msg(res.msg)
                })
            });
        })



    </script>
</body>

</html>